<template>
  <op-card>
    <op-title title="Approval Process" style="margin-bottom: 0">
      <div class="legend">
        <div class="box">
          <span class="colorBox" style="background: #45b8fd"> </span>
          <span class="text">Completed</span>
        </div>
        <div class="box">
          <span class="colorBox" style="background: #5fe3a1"></span>
          <span class="text">In Progress</span>
        </div>
        <div class="box">
          <span class="colorBox" style="background: #ebebeb"></span>
          <span class="text">To Be Completed</span>
        </div>
      </div>
      <op-select
        size="small"
        v-model="processValue"
        :options="processOption"
        @change="selectChange"
      ></op-select>
      <img
        v-if="enlargeBtn"
        @click="handleShowApproveTable"
        class="img-box"
        src="../assets/pack-up.png"
      />
    </op-title>
    <div v-show="showApproveTable" class="canvasWrap">
      <approve-process-history
        :key="{ ...approveCurrentList }"
        v-show="processValue == 'history'"
        :approveHistoryList="approveHistoryList"
        :isCreatePage="isCreatePage"
        :none-operation="noneOperation"
      />
      <approve-process-current
        :key="{ ...approveCurrentList }"
        v-show="processValue == 'current'"
        :approveCurrentList="approveCurrentList"
        :currentRow="currentRow"
        :isCreatePage="isCreatePage"
        :none-operation="noneOperation"
        :collaborateConfig="collaborateConfig"
        @success="approveProcessCurrentSuccess"
      />
    </div>
  </op-card>
</template>
<script setup>
import ApproveProcessHistory from './ApproveProcessHistory.vue';
import ApproveProcessCurrent from './ApproveProcessCurrent.vue';
import { apiMethods } from '@/utils/http.js';
const props = defineProps({
  enlargeBtn: {
    // 是否显示放大缩小按钮
    type: Boolean,
    default: true,
  },
  isCreatePage: {
    // 是否创建页面（是否需要协同审批）
    type: Boolean,
    default: false,
  },
  needInstanceId: {
    // approve 新增参数 控制无instanceId 也走接口的情况
    type: Boolean,
    default: false,
    required: false,
  },
  noneOperation: {
    type: Boolean,
    default: false,
    required: false,
  },
  currentApproveApi: {
    type: String,
    default: '',
  },
  historyApproveApi: {
    type: String,
    default: '',
  },
  collaborateConfig: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(['collaborateSuccess']);

const approveCurrentList = ref([]);
const approveHistoryList = ref([]);

const showApproveTable = ref(true);

const currentRow = ref({});

const processValue = ref('');
const processOption = ref([]);

const apiParams = computed(() => {
  return { recid: currentRow.value.recid, instanceId: currentRow.value.instanceId };
});

const init = (row = {}) => {
  if (!row) return;
  currentRow.value = row;

  /*
  当流程submit后，进入审批流生成 instanceId

  创建页面 
  instanceId 不为空  
      如果状态为 3 5 6 默认展示 history 可切换 current   显示current和history两种情况
      如果状态为 0，   只展示 history
      否则             显示current和history两种情况
  instanceId为空 
      什么情况下都显示history，或者不展示 


  审批页面
  都展示current和history
  状态为5,6默认展示history，其他状态默认展示current
  */
  if (currentRow.value.instanceId) {
    switch (currentRow.value?.status) {
      case '0':
        props.isCreatePage ? setSelect('history') : setSelect('current');
        break;
      case '3':
        setSelect('current', 'history');
        break;
      case '4':
        break;
      case '5':
        setSelect('current', 'history');
        break;
      case '6':
        setSelect('current', 'history');
        break;
      default:
        setSelect('current');
        break;
    }
  } else {
    setSelect('history');
  }
};

const selectChange = e => {
  if (e != 'current') {
    getApproveProcessHistory();
  } else {
    getApproveProcessCurrent();
  }
};

const handleShowApproveTable = () => {
  showApproveTable.value = !showApproveTable.value;
};

const getApproveProcessCurrent = async () => {
  // budget 没有instanceId也需要请求数据,所以新增needInstanceId参数控制
  if (currentRow.value?.instanceId == ('' || null) && props.needInstanceId) {
    approveHistoryList.value = [];
    approveCurrentList.value = [];
  } else {
    apiMethods.post(props.currentApproveApi, apiParams.value).then(res => {
      nextTick(() => {
        approveCurrentList.value = res.data.data || [];
      });
    });
  }
};

const getApproveProcessHistory = async () => {
  // account 有历史数据不做判空，其他看情况
  if (currentRow.value?.instanceId == ('' || null) && props.needInstanceId) {
    approveHistoryList.value = [];
    approveCurrentList.value = [];
  } else {
    apiMethods.post(props.historyApproveApi, apiParams.value).then(res => {
      nextTick(() => {
        approveHistoryList.value = res.data.data || [];
      });
    });
  }
};

/**
 * @description 设置流程图切换 History 和 Current 的下拉框
 * @param {String} option 下拉框选项
 * @param {String} value  下拉框默认值
 * */
const setSelect = (option, value = option) => {
  const selectOption = {
    history: [{ value: 'history', label: 'History' }],
    current: [
      { value: 'current', label: 'Current' },
      { value: 'history', label: 'History' },
    ],
  };
  processOption.value = selectOption[option];
  processValue.value = value;
  selectChange(value);
};

const approveProcessCurrentSuccess = () => {
  // 通知主列表刷新
  emit('collaborateSuccess');
};

defineExpose({ init });
</script>
<style lang="scss" scoped>
.legend {
  display: inline-flex;
  width: 60%;
  justify-content: center;

  .box {
    margin-left: 20px;
    .colorBox {
      display: inline-block;
      width: 16px;
      height: 10px;

      border-radius: 2px;
      margin-right: 5px;
    }
    .text {
      font-size: 14px;
      font-weight: 400;
      color: #303133;
    }
  }
}

.canvasWrap {
  overflow: auto;
  margin-top: 20px;
  min-height: 200px; // 102px
  max-height: 260px;
}
.img-box {
  cursor: pointer;
}
</style>
